<template>
  <div>
    <div ref="header" class="header">
      <van-icon size="28px" name="arrow-left" @click="goback" />
      <div class="title">经纪人服务</div>
      <div style="width: 28px" />
    </div>
    <div class="agentimg">
      <img src="../../assets/agentimg.png" alt="">
      <div class="box1" @click="toagent" />
    </div>
    <div class="btnpart">
      <button @click="toagent">现在加入 快速抢单赚佣金</button>
      <div class="safe" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {}
  },

  computed: {
    ...mapGetters(['role'])
  },
  created() {
    this.$store.dispatch('manage/getInfo')
  },

  mounted() {
    window.addEventListener('scroll', this.showScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.showScroll)
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    toagent() {
      if (
        this.role === 0 ||
          this.role === 1 ||
          this.role === 4 ||
          this.role === 5
      ) {
        this.$router.push({ path: '/buyagent' })
      } else if (this.role === 2 || this.role === 3) {
        this.$dialog
          .alert({
            title: '温馨提示',
            message: '您当前身份无法发布入驻经纪人,如有问题请咨询客服',
            confirmButtonColor: '#45b7cb',
            theme: 'round-button',
            messageAlign:"left"
          })
          .then(() => {})
      }
    },
    showScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 120) {
        this.$refs.header.style.color = '#333'
      } else {
        this.$refs.header.style.color = '#fff'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  position: fixed;
  left: 0;
  top: 0;
  padding: 10px 15px;
  z-index: 1000;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: 15px;
  color: #fff;
  .title {
    line-height: 25px;
    height: 25px;
    font-size: 16px;
    font-weight: bold;
  }
}
.agentimg {
  width: 100%;
  position: relative;
  > img {
    width: 100%;
  }
  .box1 {
    position: absolute;
    top: 48%;
    width: 100%;
    height: 100px;
  }
}
.btnpart {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  padding: 10px 0;
  text-align: center;
  background-color: rgba(244, 121, 53, 0.8);
  button {
    border: none;
    border-radius: 20px;
    height: 40px;
    width: 90%;
    color: #ec5d51;
    font-weight: bold;
    background-color: #ffdbd5;
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>
